<template>
	<div class="login">
		<img src="../assets/bgImg.jpg" class="bgImg" />
		<div class="content">
			<div class="bidTitle">CRM系统登录</div>
			<el-form class="logCon" :model="loginForm" :rules="rules" ref="loginForm" label-width="100px">
				<el-form-item class="line"><span>账号:</span>
					<el-input class="bt_input" v-model="loginForm.name" type="text" />
				</el-form-item>
				<el-form-item class="line"><span>密码:</span>
					<el-input class="bt_input" v-model="loginForm.password" type="password" />
				</el-form-item>
				<button type="button" class="logingBut" @click="submitForm('loginForm')">登录</button>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'login',
		data() {
			return {
				loginForm: {
					name: '',
					password: ''
				},
				rules: {
					id: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password1: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			submitForm(loginForm) {
				this.$refs[loginForm].validate((valid) => {
					if (valid) {
						this.$http.post('/sys-user/lists?username=' + this.loginForm.name + '&pwd=' + this.loginForm.password).then(res => {
							if (res.data.username === this.loginForm.name && res.data.password === this.loginForm.password && res.data.isOnline === 0) {
								localStorage.setItem('userId', res.data.id) //用户Id
								localStorage.setItem('myToken', res.data.username) //用户名
								localStorage.setItem('state', 'login') //登录状态
								localStorage.setItem("nId", res.data.roleId) //权限Id
								this.$http.post("/sys-user/getrole?id=" + res.data.roleId + "&name=" + res.data.username).then(res => {
									localStorage.setItem("reloname", res.data.name) //管理员身份
									this.$router.push("/index")
								});
								this.$http.get("/sys-user/updateByid",{params:{
									id:res.data.id,
									isOnline:1
								}});
							}else if(res.data.isOnline === 1){
								this.$message.error('账号'+res.data.username+'登录中，请勿重复登录')
							} else {
								this.$message.error('账号或密码错误,请重新输入') //账号密码错误时的提示
							}

						});
					}
				});

			},
			resetForm(loginForm) {
				this.$refs[loginForm].resetFields();
			}
		}
	}
</script>

<style scoped>
	body {
		text-align: center;
		height: 100%;
	}

	.bgImg {
		position: absolute;
		top: 0px;
		left: 0px;
		bottom: 0px;
		right: 0px;
		width: 100%;
		height: 100%;
	}

	.logo {
		width: 800px;
	}

	.bidTitle {
		text-align: center;

		color: #e6e6e6;
		font-size: 34px;
		font-weight: 600;
	}

	.logCon {
		color: #FFFFFF;
		margin-top: 40px;
	}

	body .content {
		width: 42%;
		position: fixed;
		background: #0f1a1494;
		left: 29%;
		padding: 5% 1%;
		margin-top: 12%;
		border-radius: 5px;
	}

	body .logingBut {
		background: #2d8c5fa6;
		border: none;
		padding: 12px 0px;
		color: #edefee;
		border-radius: 2px;
		width: 330px;
		margin-left: 170px;
		margin-top: 5px;
	}

	body .bt_input {
		border-radius: 2px;
		border: none;
		/* padding: 11px 5px; */
		width: 300px;
		margin-right: 10px;
		color: #333;
		margin-left: 55px;
		margin-bottom: 18px;
		background: #ffffffd9;
	}

	body .logCon span {
		font-size: 18px;
		height: 40px;
		line-height: 40px;
	}
</style>
